<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type="text" placeholder="用户名" v-model="username" /><br /><br />
  <input type="password" placeholder="密码" v-model="password" /><br /><br />
  <input
    type="password"
    placeholder="确认密码"
    v-model="confirmPassword"
  /><br /><br />
  <input type="text" placeholder="昵称" v-model="nickname" /><br /><br />
  性别：
  <label
    ><input type="radio" name="gender" value="男" v-model="gender" />男</label
  >
  <label
    ><input type="radio" name="gender" value="女" v-model="gender" />女</label
  ><br /><br />
  所属城市：
  <select v-model="sheng">
    <option value="" v-for="(item,index) in arr">{{item.name}}</option>
  </select>
  <select v-model="shi">
    <option value=""></option>
  </select>
  <select v-model="qu">
    <option value=""></option></select
  ><br /><br />
  兴趣爱好：
  <label><input type="checkbox" value="爬山" v-model="hobbies" />爬山</label>
  <label><input type="checkbox" value="旅游" v-model="hobbies" />旅游</label>
  <label><input type="checkbox" value="看书" v-model="hobbies" />看书</label>
  <label><input type="checkbox" value="看星星" v-model="hobbies" />看星星</label
  ><br />
  <button @click="submitForm()">提交</button>
  <button @click="Cancel()">取消</button>
  <div class="box" v-show="show">
    <p>用户名：<b>{{username}}</b></p>
    <p>密码：<b>{{password}}</b></p>
    <p>确认密码：<b>{{confirmPassword}}</b></p>
    <p>昵称：<b>{{nickname}}</b></p>
    <p>性别：<b>{{gender}}</b></p>
    <p>所属城市：<b>{{sheng}}{{shi}}{{qu}}</b></p>
    <p>兴趣爱好：<b>{{hobbiesStr}}</b></p>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      username: "",
      password: "",
      confirmPassword: "",
      nickname: "",
      gender: "",
      sheng: "",
      shi: "",
      qu: "",
      hobbies: [],
      show: false,
      arr: [
        {
          name: "河北省",
          city: [
            {
              name: "石家庄市",
              districtAndCounty: [
                "长安区",
                "桥东区",
                "桥西区",
                "新华区",
                "裕华区",
              ],
            },
            {
              name: "张家口市",
              districtAndCounty: [
                "桥西区",
                "桥东区",
                "宣化区",
                "下花园区",
                "宣化县",
                "张家口市宣化区",
              ],
            },
            {
              name: "承德市",
              districtAndCounty: [
                "双桥区",
                "双滦区",
                "鹰手营子矿区",
                "承德县",
                "下板城镇",
                "兴隆县",
                "兴隆镇",
              ],
            },
            {
              name: "秦皇岛市",
              districtAndCounty: [
                "海港区",
                "山海关区",
                "北戴河区",
                "昌黎县",
                "昌黎镇",
                "抚宁县",
                "抚宁镇",
                "卢龙县",
              ],
            },
          ],
        },
        {
          name: "山西省",
          city: [
            {
              name: "太原市",
              districtAndCounty: [
                "杏花岭区",
                "小店区",
                "迎泽区",
                "尖草坪区",
                "万柏林区",
                "晋源区",
                "古交市",
                "清徐县",
              ],
            },
            {
              name: "朔州市",
              districtAndCounty: [
                "朔城区",
                "平鲁区",
                "山阴县",
                "岱岳乡",
                "应县",
                "金城镇",
                "右玉县",
                "新城镇",
                "怀仁县",
                "云中镇",
              ],
            },
            {
              name: "大同市",
              districtAndCounty: [
                "城区",
                "矿区",
                "南郊区",
                "新荣区",
                "阳高县",
                "龙泉镇",
                "天镇县",
                "玉泉镇",
                "广灵县",
              ],
            },
            {
              name: "阳泉市",
              districtAndCounty: [
                "城区",
                "矿区",
                "郊区",
                "平定县",
                "冠山镇",
                "盂县",
                "秀水镇",
              ],
            },
          ],
        },
      ],
    },
    methods: {
      submitForm() {
        if (this.password !== this.confirmPassword) {
          alert("两次密码输入不一致");
        } else {
          this.show = true;
        }
      },
      Cancel() {
        this.show = false;
      },
    },
    computed: {
      hobbiesStr() {
        return this.hobbies.join(",");
      },
    },
  });
</script>
